<!-- 个人中心 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>新闻资讯</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <!-- 样式 -->
    <link href="../../css/style.css" rel="stylesheet"/>
    <!-- 主题（主要颜色设置） -->
    <link href="../../css/theme.css" rel="stylesheet"/>
    <!-- 通用的css -->
    <link href="../../css/common.css" rel="stylesheet"/>
</head>
<body>

<div id="app">
    <!-- 轮播图 -->
    <div class="layui-carousel" id="swiper">
        <div carousel-item id="swiper-item">
            <div v-bind:key="index" v-for="(item,index) in swiperList">
                <img :src="item.img" class="swiper-item">
            </div>
        </div>
    </div>
    <!-- 轮播图 -->

    <!-- 标题 -->
    <h2 class="index-title" style="margin-top: 20px;">CONFIRM / ORDER</h2>
    <div class="line-container">
        <p class="line"> 确认下单 </p>
    </div>
    <!-- 标题 -->

    <div class="container">
        <h2 v-if="seat!=1">选择收货地址</h2>
        <table class="layui-table address-table" lay-skin="nob" v-if="seat!=1">
            <!-- <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup> -->
            <thead>
            <tr>
                <th>选择</th>
                <th>收件人</th>
                <th>联系方式</th>
                <th>地址</th>
            </tr>
            </thead>
            <tbody>
            <tr v-bind:key="index" v-for="(item,index) in addressList">
                <td><input :value="index" name="address" type="radio"/></td>
                <td>{{item.name}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.address}}</td>
            </tr>
            </tbody>
        </table>
        <h2>清单列表</h2>
        <table class="layui-table" lay-skin="nob" style="border: 3px dotted #EEEEEE;margin: 20px 0;">
            <thead>
            <tr>
                <th>购买商品</th>
                <th>价格</th>
                <th v-if="seat==1">座位</th>
                <th v-else>数量</th>
                <th>总价</th>
            </tr>
            </thead>
            <tbody>
            <tr v-bind:key="index" v-for="(item,index) in dataList">
                <td style="display: flex;text-align: left;">
                    <img :src="item.picture" style="width: 100px;height: 100px;object-fit: cover;">
                    <div style="margin-left: 10px;margin-top: 10px;">
                        {{item.goodname}}
                    </div>
                </td>
                <td style="width: 100px;" v-if="type==2">{{item.price}} 积分</td>
                <td style="width: 100px;" v-else>{{item.price}} RMB</td>
                <td style="width: 140px;" v-if="seat==1">
                    {{item.activeSeat}}
                </td>
                <td style="width: 140px;" v-else>
                    {{item.buynumber}}
                </td>
                <td style="width: 100px;" v-if="type==2">{{item.price * item.buynumber}} 积分</td>
                <td style="width: 100px;" v-else-if="seat==1">{{item.total}} RMB</td>
                <td style="width: 100px;" v-else>{{(item.price * item.buynumber).toFixed(2)}} RMB</td>
            </tr>
            </tbody>
        </table>

        <div class="btn-container" v-if="seat==1">
					<span style="font-size: 18px;font-weight: bold;color: #ce0b07;margin-right: 20px;">
						总价：{{dataList[0].total}}RMB
					</span>
            <button @click="xuanzuoClick()" class="layui-btn layui-btn-lg btn-theme" type="button">
                <i class="layui-icon">&#xe657;</i> 支付
            </button>
        </div>
        <div class="btn-container" v-else-if="type==2">
					<span style="font-size: 18px;font-weight: bold;color: #ce0b07;margin-right: 20px;">
						总价：{{totalPrice}}积分
					</span>
            <button @click="jifenClick()" class="layui-btn layui-btn-lg btn-theme" type="button">
                <i class="layui-icon">&#xe657;</i> 兑换
            </button>
        </div>
        <div class="btn-container" v-else>
					<span style="font-size: 18px;font-weight: bold;color: #ce0b07;margin-right: 20px;">
						总价：{{totalPrice.toFixed(2)}}RMB
					</span>
            <button @click="payClick()" class="layui-btn layui-btn-lg btn-theme" type="button">
                <i class="layui-icon">&#xe657;</i> 支付
            </button>
        </div>
    </div>

</div>

<!-- layui -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<script src="../../js/vue.js"></script>
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            // 轮播图
            swiperList: [{
                img: '../../img/banner.jpg'
            }],
            dataList: [],
            addressList: [],
            seat: 0,
            type: 0,
            // 当前用户信息
            user: {}
        },
        computed: {
            totalPrice: function () {
                var total = 0;
                for (var item of this.dataList) {
                    total += item.price * item.buynumber
                }
                return total;
            }
        },
        methods: {
            jump(url) {
                jump(url)
            },
            // 正常下单，生成订单，减少余额，添加积分，减少库存，修改状态已支付
            payClick() {
                console.log('payClick')
                var index = layui.jquery('input[name=address]:checked').val();
                console.log(index);
                if (!index) {
                    layui.layer.msg('请选择收货地址', {
                        time: 2000,
                        icon: 5
                    });
                    return
                }

                // 生成订单
                for (let item of this.dataList) {

                    // 获取商品详情信息
                    layui.http.request(`${item.tablename}/info/${item.goodid}`, 'get', {}, (res) => {
                        // 订单编号
                        var orderId = genTradeNo();
                        let data = res.data;
                        // 减少库存
                        data.alllimittimes = data.alllimittimes - item.buynumber;
                        // 更新库存信息
                        layui.http.requestJson(`${item.tablename}/update`, 'post', data, (res) => {
                            // 添加订单信息
                            let order = {
                                orderid: orderId,
                                tablename: item.tablename,
                                userid: this.user.id,
                                goodid: item.goodid,
                                goodname: item.goodname,
                                picture: item.picture,
                                buynumber: item.buynumber,
                                discountprice: item.price,
                                price: item.price,
                                total: item.price * item.buynumber,
                                discounttotal: item.price * item.buynumber,
                                type: 1,
                                total: this.totalPrice,
                                address: this.addressList[index].address,
                                status: '未支付'
                            }
                            layui.http.requestJson(`orders/add`, 'post', order, (res) => {
                                // 减少余额，更新订单状态
                                // 判断余额是否充足
                                if (this.user.money < this.totalPrice) {
                                    layui.layer.msg('余额不足，请先充值', {
                                        time: 2000,
                                        icon: 5
                                    });
                                    return
                                }
                                // 如果该商品存在积分
                                if (data.jifen) {
                                    this.user.jifen = Number(this.user.jifen) + Number(data.price * item.buynumber);
                                }
                                this.user.money = this.user.money - this.totalPrice;
                                // 更新用户余额
                                layui.http.requestJson(`${localStorage.getItem("userTable")}/update`, 'post', this.user, (res) => {
                                    order.status = '已支付'
                                    layui.http.request(`orders/list`, 'get', {
                                        orderid: orderId,
                                        page: 1,
                                        limit: 1,
                                    }, (res) => {
                                        order.id = res.data.list[0].id;
                                        layui.http.requestJson(`orders/update`, 'post', order, (res) => {
                                            // 删除购物车数据(如果是购物车下单)
                                            if (item.id) {
                                                layui.http.requestJson(`cart/delete`, 'post', [item.id], (res) => {
                                                });
                                            }
                                            layui.layer.msg('购买成功', {
                                                time: 2000,
                                                icon: 6
                                            }, function () {
                                                window.location.href = '../shop-order/list.html'
                                            });
                                        });
                                    });
                                });
                            })
                        })
                    });
                }
            },
            // 积分兑换，生成订单，减少用户积分，减少库存
            jifenClick() {
                console.log('jifenClick')
                var index = layui.jquery('input[name=address]:checked').val();
                console.log(index);
                if (!index) {
                    layui.layer.msg('请选择收货地址', {
                        time: 2000,
                        icon: 5
                    });
                    return
                }

                // 生成订单
                for (let item of this.dataList) {
                    // 订单编号
                    var orderId = genTradeNo();
                    layui.http.request(`${item.tablename}/info/${item.goodid}`, 'get', {}, (res) => {
                        let data = res.data;
                        // 减少库存
                        data.alllimittimes = data.alllimittimes - item.buynumber;
                        // 更新库存信息
                        layui.http.requestJson(`${item.tablename}/update`, 'post', data, (res) => {
                            // 判断积分是否充足
                            if (this.user.jifen < this.totalPrice) {
                                layui.layer.msg('积分不足，兑换失败', {
                                    time: 2000,
                                    icon: 5
                                });
                                return
                            }
                            // 添加订单信息
                            let order = {
                                orderid: orderId,
                                tablename: item.tablename,
                                userid: this.user.id,
                                goodid: item.goodid,
                                goodname: item.goodname,
                                picture: item.picture,
                                buynumber: item.buynumber,
                                discountprice: item.price,
                                price: item.price,
                                total: item.price * item.buynumber,
                                discounttotal: item.price * item.buynumber,
                                type: 2,
                                total: this.totalPrice,
                                address: this.addressList[index].address,
                                status: '已支付'
                            }
                            layui.http.requestJson(`orders/add`, 'post', order, (res) => {
                                this.user.jifen = this.user.jifen - this.totalPrice;
                                // 更新用户余额
                                layui.http.requestJson(`${localStorage.getItem("userTable")}/update`, 'post', this.user, (res) => {
                                    layui.layer.msg('兑换成功', {
                                        time: 2000,
                                        icon: 6
                                    }, function () {
                                        window.location.href = '../shop-order/list.html'
                                    });
                                });
                            })
                        })
                    });
                }
            },
            // 选座下单,生成订单，减少余额，添加积分，减少库存，修改状态为已支付
            xuanzuoClick() {
                console.log('xuanzuoClick')
                // 生成订单
                for (let item of this.dataList) {
                    // 订单编号
                    var orderId = genTradeNo();
                    // 获取商品详情信息
                    layui.http.request(`${item.tablename}/info/${item.goodid}`, 'get', {}, (res) => {
                        let data = res.data;
                        // 减少库存
                        data.alllimittimes = data.alllimittimes - item.buynumber;
                        // 获取已经被预定的座位号
                        let selectArray = data.selected.split(',');
                        // 获取用户预定的座位号
                        let activeArray = item.address.split(',');
                        // 新的预定座位号
                        let newSelectArray = selectArray.concat(activeArray);
                        // 赋值给参数
                        data.selected = newSelectArray.join(',');
                        // 更新库存,座位信息
                        layui.http.requestJson(`${item.tablename}/update`, 'post', data, (res) => {
                            // 添加订单信息
                            let order = {
                                orderid: orderId,
                                tablename: item.tablename,
                                userid: this.user.id,
                                goodid: item.goodid,
                                goodname: item.goodname,
                                picture: item.picture,
                                buynumber: item.buynumber,
                                discountprice: item.price,
                                price: item.price,
                                total: item.total,
                                discounttotal: item.total,
                                type: 1,
                                address: item.address,
                                status: '未支付'
                            }
                            layui.http.requestJson(`orders/add`, 'post', order, (res) => {
                                // 减少余额，更新订单状态
                                // 判断余额是否充足
                                if (this.user.money < this.totalPrice) {
                                    layui.layer.msg('余额不足，请先充值', {
                                        time: 2000,
                                        icon: 5
                                    });
                                    return
                                }
                                // 如果该商品存在积分
                                if (data.jifen) {
                                    this.user.jifen = Number(this.user.jifen) + Number(data.jifen * item.buynumber);
                                }
                                this.user.money = this.user.money - this.totalPrice;
                                // 更新用户余额
                                layui.http.requestJson(`${localStorage.getItem("userTable")}/update`, 'post', this.user, (res) => {
                                    order.status = '已支付'
                                    layui.http.request(`orders/list`, 'get', {
                                        orderid: orderId,
                                        page: 1,
                                        limit: 1,
                                    }, (res) => {
                                        order.id = res.data.list[0].id;
                                        layui.http.requestJson(`orders/update`, 'post', order, (res) => {
                                            layui.layer.msg('购买成功', {
                                                time: 2000,
                                                icon: 6
                                            }, function () {
                                                window.location.href = '../shop-order/list.html'
                                            });
                                        });
                                    });
                                });
                            })
                        })
                    });
                }
            }
        }
    })

    layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var carousel = layui.carousel;
        var http = layui.http;
        var jquery = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;

        // 订单类型，2则是积分兑换，其他是正常下单
        vue.type = http.getParam('type');
        // 订单类型，seat存在值则是选座下单，否则是其他类型
        vue.seat = http.getParam('seat');

        // 充值
        jquery('#btn-recharge').click(function (e) {
            layer.open({
                type: 2,
                title: '用户充值',
                area: ['900px', '600px'],
                content: '../shop-recharge/recharge.html'
            });
        });

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function (res) {
            if (res.data.list.length > 0) {
                var swiperItemHtml = '';
                for (let item of res.data.list) {
                    if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
                        swiperItemHtml +=
                            '<div>' +
                            '<img class="swiper-item" src="' + item.value + '">' +
                            '</div>';
                    }
                }
                jquery('#swiper-item').html(swiperItemHtml);
                // 轮播图
                carousel.render({
                    elem: '#swiper',
                    width: swiper.width, height: swiper.height,
                    arrow: swiper.arrow,
                    anim: swiper.anim,
                    interval: swiper.interval,
                    indicator: "none"
                });
            }
        });

        // 获取地址数据
        http.request('address/list', 'get', {
            userid: localStorage.getItem('userid')
        }, function (res) {
            vue.addressList = res.data.list
        })

        // 获取商品购买的清单列表
        var orderGoods = localStorage.getItem('orderGoods')
        // 转换成json类型，localstorage保存的是string数据
        vue.dataList = JSON.parse(orderGoods);

        // 用户当前用户信息
        let table = localStorage.getItem("userTable");
        http.request(`${table}/session`, 'get', {}, function (data) {
            vue.user = data.data;
        });

    });
</script>
</body>
</html>
